<template>
  <div>
    <!-- 直接在组件中获取数据 不好维护和阅读 -->
    <h2>Count插值拿:{{ $store.state.count }}</h2>
    <h2>num插值拿:{{ $store.state.num }}</h2>

    <h2>Count计算属性拿:{{ count }}</h2>
    <h2>num计算属性拿:{{ num }}</h2>
  </div>
</template>

<script>
/* vuex提供了一个 mapState 的辅助函数,方便我们拿取数据 */
import { mapState } from "vuex";
export default {
  name: "count",
  mounted() {
    //mapState可以接受一个数组作为参数,数组的值就是要去store中拿取的数据名称
    //查看结果以后,发现mapState返回一个对象,对象内部是获取state数据的函数,函数调用后(需要把this指向组件实例)可以得到state的值
    //换种思路,mapState帮我们生成了 获取state值的 计算属性函数 组成的对象
    const result = mapState(["count", "num"]);
    console.log(result, "result");
    console.log(result.count.call(this));
  },
  computed: {
    ...mapState(["count", "num"]),
  },
};
</script>

<style></style>
